<!--  -->
<template>
  <div>
    <cu-custom
      :bgImage="bgImage"
      :needBack="true"
      bgColor="bgNormal"
      topTitle="申请列表"
      titleClass="commTitleWhite"
      backIconColor="#fff"
    ></cu-custom>
    <view class="filtrate">
      <filtrate :options="options" ref="filtrate"></filtrate>
    </view>
    <view class="content">
      <scroll-view
        class="scroll_content"
        scroll-y
        :style="{ height: scorllContentHeight }"
        v-if="applicationListCopy.length > 0"
      >
        <view class="application_container">
          <view
            class="application_item"
            v-for="(item, index) in applicationListCopy"
            :key="index"
            @click="toWrite(item)"
          >
            <view class="application_item_left">
              <view class="">
                <text class="">{{ item.target || "--" }} </text>
                <text :class="item.submitStatus == 1 ? 'no_write' : 'write'"
                  >{{ item.submitStatus == "1" ? "未填报" : "已填报" }}
                </text>
              </view>
              <view class="">
                <text class="">总分：{{ item.totalPoint || "--" }}</text>
              </view>
              <view class="">
                <text class=""> 自我评分：{{ item.selfScore || "--" }} </text>
              </view>
              <view class="">
                <text class="">指导得分：{{ item.scoreZhidao || "--" }} </text>
              </view>
            </view>
            <image
              v-if="item.scoreZhidao"
              class=""
              :src="require('@/static/images/workbench/yishenghe.png')"
            >
            </image>
            <image
              v-else-if="!item.scoreZhidao && item.targetDeclarationRecordId"
              class=""
              :src="require('@/static/images/workbench/weishenghe.png')"
            >
            </image>
            <u-button
              v-if="item.submitStatus == 1"
              :custom-style="customStyle"
              @click.stop="toWrite(item)"
              >填写申报</u-button
            >
          </view>
        </view>
        <!-- <u-loadmore :status="status" :load-text="loadText"></u-loadmore> -->
      </scroll-view>
    </view>
    <u-popup
      v-model="showTree"
      mode="bottom"
      closeable
      :custom-style="{ paddingTop: '20rpx' }"
      height="800"
    >
      <view>
        <view class="target_content">
          <tki-tree
            ref="tkitree"
            :range="range"
            rangeKey="target"
            :defaultIcon="img1"
            :currentIcon="img2"
            @confirm="goList"
          />
        </view>
      </view>
    </u-popup>
  </div>
</template>

<script>
import filtrate from "components/filtrate";
import tkiTree from "@/components/sy-tree-number/tki-tree.vue";
import { getTargetDeclarationRecordList } from "@/api/workBench";
import { getTargetManagement } from "@/api/report.js";
export default {
  data() {
    return {
      customStyle: {
        background: "linear-gradient(90deg, #417ffc, #505eeb)",
        boxShadow: "0rpx 6rpx 10rpx 0rpx rgba(22, 121, 253, 0.28)",
        borderRadius: "32rpx",
        color: "#fff",
        padding: "18rpx 29rpx",
        height: "63rpx",
        lineHeight: "63rpx",
        width: "166rpx",
        fontSize: "28rpx",
        marginTop: "100rpx",
      },
      scorllContentHeight: "",
      applicationList: [],
      applicationListCopy: [],
      form: {
        size: 9999,
        current: 1,
        target: "",
        auditStatus: "",
        submitStatus: "",
      },
      total: 0,
      loadText: {
        loadmore: "加载更多",
        loading: "加载中",
        nomore: "没有更多了",
      },
      status: "loadmore",
      options: [
        {
          title: "填报状态",
          id: 1,
          children: [
            {
              name: "已填报",
              value: "2",
              id: 1,
            },
            {
              name: "未填报",
              value: "1",
              id: 2,
            },
          ],
        },
        {
          title: "审核状态",
          id: 2,
          children: [
            {
              name: "已审核",
              value: "2",
              id: 1,
            },
            {
              name: "未审核",
              value: "1",
              id: 2,
            },
          ],
        },
      ],
      showTree: false,
      range: [],
      img1: require("@/static/images/xiala1.png"),
      img2: require("@/static/images/xiala2.png"),
      targetManagementIdList: [],
    };
  },
  mounted() {
    uni.$on("search", (data) => {
      // console.log(data);
      this.form.target = String(data.keyword);
      this.targetManagementIdList = [];
      this.getList();
    });
    uni.$on("selectOptions", (data) => {
      // console.log(data);
      this.form.auditStatus = "";
      this.form.submitStatus = "";
      this.targetManagementIdList = [];
      this.options.forEach((item) => {
        item.children.forEach((child) => {
          if (child.id == data[item.id]) {
            if (item.title === "填报状态") {
              this.form.submitStatus = child.value;
            } else if (item.title === "审核状态") {
              this.form.auditStatus = child.value;
            }
          }
        });
      });
      console.log(this.form);
      this.getList();
      // console.log(this.form);
    });
    uni.$on("showTree", (val) => {
      this.showTree = val;
    });
  },
  onShow() {
    this.getHeight();
    this.getList();
    this.getTreeList();
  },
  // onLoad(options) {
  //   // console.log(typeof options.id);
  //   this.targetManagementIdList = options.id;
  // },
  methods: {
    filterList() {
      if (this.form.submitStatus == "" && this.form.auditStatus == "") {
        this.applicationListCopy = this.applicationList;
      } else if (this.form.submitStatus == "" && this.form.auditStatus == 1) {
        this.applicationListCopy = this.applicationList.filter(
          (item) => item.scoreZhidao === null && item.targetDeclarationRecordId
        );
      } else if (this.form.submitStatus == "" && this.form.auditStatus == 2) {
        this.applicationListCopy = this.applicationList.filter(
          (item) => item.scoreZhidao && item.targetDeclarationRecordId
        );
      } else if (this.form.submitStatus == 1 && this.form.auditStatus == "") {
        this.applicationListCopy = this.applicationList.filter(
          (item) => item.submitStatus === 1
        );
      } else if (this.form.submitStatus == 1 && this.form.auditStatus == 1) {
        this.applicationListCopy = this.applicationList.filter(
          (item) =>
            item.submitStatus === 1 &&
            item.scoreZhidao === null &&
            item.targetDeclarationRecordId
        );
      } else if (this.form.submitStatus == 1 && this.form.auditStatus == 2) {
        this.applicationListCopy = this.applicationList.filter(
          (item) =>
            item.submitStatus === 1 &&
            item.scoreZhidao &&
            item.targetDeclarationRecordId
        );
      } else if (this.form.submitStatus == 2 && this.form.auditStatus == "") {
        this.applicationListCopy = this.applicationList.filter(
          (item) => item.submitStatus === 2
        );
      } else if (this.form.submitStatus == 2 && this.form.auditStatus == 1) {
        this.applicationListCopy = this.applicationList.filter(
          (item) =>
            item.submitStatus === 2 &&
            item.scoreZhidao === null &&
            item.targetDeclarationRecordId
        );
      } else if (this.form.submitStatus == 2 && this.form.auditStatus == 2) {
        this.applicationListCopy = this.applicationList.filter(
          (item) =>
            item.submitStatus === 2 &&
            item.scoreZhidao &&
            item.targetDeclarationRecordId
        );
      }
    },
    async getTreeList() {
      let res = await getTargetManagement({
        socialOrganizationTypeId: uni.getStorageSync(
          "mySocialOrganizationTypeId"
        ),
      });
      let tree = res.data;
      this.changeKey(tree);
      console.log(tree);
      this.range = tree;
    },
    changeKey(arr) {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].childs && arr[i].childs.length > 0) {
          arr[i].children = arr[i].childs;
          this.changeKey(arr[i].childs);
        }
      }
    },
    getHeight() {
      this.scorllContentHeight = `calc(100vh - ${this.CustomBar}px - 122rpx)`;
    },
    getList() {
      console.log(this.form);
      const { size, current, target } = this.form;
      getTargetDeclarationRecordList({
        size,
        current,
        target,
        targetManagementIdList: this.targetManagementIdList.toString(),
        declarationInfoId: uni.getStorageSync("declarationInfoId"),
        // userId: uni.getStorageSync("userInfo").userId,
        // declarationSystemId: uni.getStorageSync("applyId"),
      }).then((res) => {
        if (res.code == 200) {
          this.total = res.data.total;
          this.applicationList = res.data.records;
          this.applicationListCopy = res.data.records;
          this.filterList();
          // console.log("applicationListCopy===", this.applicationListCopy);
          // if (res.data.total > 10) {
          // 	this.applicationList = this.applicationList.concat(
          // 		res.data.records
          // 	); //合并数组
          //   this.applicationListCopy = this.applicationList
          // 	// console.log(this.applicationList);
          // } else {
          // 	this.applicationList = res.data.records;
          //   this.applicationListCopy = this.applicationList
          // 	this.status = "nomore";
          // }
        }
      });
    },
    // 加载更多
    loadMore() {
      console.log("到底了");
      if (this.total > this.form.current * this.form.size) {
        this.status = "loading";
        this.form.current++;
        this.getList();
      } else {
        this.status = "nomore";
      }
    },
    // 填写指标
    toWrite(data) {
      uni.navigateTo({
        url: `./write?id=${data.id}&targetDeclarationRecordId=${data.targetDeclarationRecordId}&status=${data.auditStatus}`,
      });
    },
    goList(item) {
      console.log(item, "123");
      // let ids = this.getIdsById(item.id, this.range);
      this.$refs.filtrate.selectOptions = {};
      this.form.auditStatus = "";
      this.form.submitStatus = "";
      this.targetManagementIdList = [item.id];
      console.log(this.targetManagementIdList);
      this.getList();
      this.showTree = false;
      // uni.navigateTo({
      //   url: "/packageB/applicationList/index?id=" + ids.toString(),
      // });
    },
  },
  components: {
    filtrate,
    tkiTree,
  },
};
</script>
<style lang='scss' scoped>
.scroll_content {
  font-size: 26rpx;
  color: #333;
  margin-top: 21rpx;

  .application_container {
    padding: 0 30rpx;

    .application_item {
      background: #fff;
      border-radius: 8rpx;
      padding: 26rpx 55rpx 38rpx 35rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      &:nth-child(n + 2) {
        margin-top: 17rpx;
      }

      image {
        width: 166rpx;
        height: 126rpx;
      }

      .application_item_left {
        view:first-child {
          display: flex;
          align-items: center;
          margin-bottom: 35rpx;

          text:first-child {
            font-weight: bold;
            font-size: 28rpx;
            margin-right: 18rpx;
          }

          text:last-child {
            padding: 10rpx 24rpx;
            border-radius: 8rpx;
            font-size: 24rpx;
          }

          .write {
            background: #edf1ff;
            border: 1px solid #dde3f7;
            color: #758eff;
          }

          .no_write {
            background: #edf1ff;
            border: 1px solid #dde3f7;
            color: #bdbdbd;
          }
        }

        view:nth-child(n + 3) {
          margin-top: 25rpx;
        }
      }
    }
  }
}

::v-deep {
  .u-load-more-wrap {
    margin: 10rpx 0 !important;
  }

  .u-search {
    width: 90%;
  }
}

.target_content {
}

.target {
  line-height: 40rpx;
  text-align: center;
}
</style>